import Taro, { Component } from '@tarojs/taro'
import { View, Map, CoverView, CoverImage, Navigator } from '@tarojs/components'
import { get } from '../../utils/http'
import center from '../../assets/images/center.png'
import buy from '../../assets/images/buy.png'
import sell from '../../assets/images/sell.png'

import './index.scss'


class Index extends Component {

  state = {
    latitude: 23.099994,
    longitude: 113.324520,
    markers: []
  }

  componentDidMount() {
    this.getLocation();
    this.mapContext = Taro.createMapContext('map')
    this.getMarkers();
  }


  async getMarkers() {
    let rs = await get('index.php/trade/get_list')
    console.log(rs);
    let list = [];
    rs.data.forEach((item) => {
      list.push({
        ...item,
        iconPath: item.type === 'buy' ? buy : sell
      })
    })
    this.setState({
      markers: list
    })
  }


  getLocation() {
    Taro.getLocation({
      type: 'wgs84',
      success: (res) => {
        this.setState({
          longitude: res.longitude,
          latitude: res.latitude
        })
      }
    })
  }

  movetocenter() {
    this.mapContext.moveToLocation();
  }

  goPublish() {
    Taro.navigateTo({
      url: '/pages/publish/publish',
    })
  }


  render() {
    return (
      <View class="container">

        <View class="map">
          <Map id="map" longitude={this.state.longitude}latitude={this.state.latitude} scale="15"
            markers={this.state.markers}
            show-location>
            <CoverView class="tocenter" onClick={this.movetocenter}>
              <CoverImage src={center} ></CoverImage>
            </CoverView>

          </Map>


        </View>

        <View className="tabbar">
          <View className="publish" onClick={this.goPublish}>发布</View>
          <View className="search">
            <Navigator url="/pages/search/search" open-type="navigate">
              搜索
        </Navigator>
          </View>
        </View>

      </View>
    )
  }
}

export default Index
